<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-05-27 15:30:09
 * @FilePath     : \aaa\examples\forearmLink.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>threejs学习</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';
			import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

			import {
				WebGLRenderer,
				PerspectiveCamera,
				Vector3,
				Scene,
				MeshStandardMaterial,
				Mesh,
				AmbientLight,
				SpotLight,
				PCFSoftShadowMap,
				Fog,
				PlaneBufferGeometry,
				MeshPhongMaterial,
				HemisphereLight,
			} from 'three';

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;
			const canvas = document.querySelector('#fireflx');

			const scene = new Scene();
			const loader = new STLLoader();
			loader.load(
				'../module_files/ForearmLink.stl',
				function (geometry) {
					const material = new MeshPhongMaterial({
						color: 0xff5533,
						specular: 0x111111,
						shininess: 200,
					});
					const mesh = new Mesh(geometry, material);
					mesh.position.set(0, -0.25, 0.6);
					mesh.rotation.set(0, -Math.PI / 2, 0);
					mesh.scale.set(0.5, 0.5, 0.5);
					mesh.castShadow = true;
					mesh.receiveShadow = true;
					scene.add(mesh);
				},
				undefined,
				function (err) {
					console.error(err);
				}
			);

			//创建环境光
			const ambientLight = new AmbientLight(0xffffff, 1);
			scene.add(ambientLight);
			//创建聚光灯
			const spotLight = new SpotLight(0xabffdb);
			spotLight.position.set(0, 1000, 1100);
			//cast -- 投射
			spotLight.castShadow = true;
			scene.add(spotLight);
			const camera = new PerspectiveCamera(35, k, 0.1, 10000);
			camera.position.set(0, 0, 130);
			camera.lookAt(new Vector3(0, 0, -130));
			scene.add(camera);

			const renderer = new WebGLRenderer({ canvas, antialias: true, alpha: true });
			renderer.setSize(w, h);
			renderer.shadowMap.enabled = true; //显示阴影
			renderer.shadowMap.type = PCFSoftShadowMap;
			renderer.setClearColor(0x3f3f3f, 1); //设置背景颜色

			const controls = new OrbitControls(camera, renderer.domElement);

			function animate() {
				requestAnimationFrame(animate);
				renderer.render(scene, camera);
			}
			animate();
		</script>
	</body>
</html>
